<template>
    <el-config-provider :locale="elLocale">
        <div>
            <el-button type="primary" size="default" @click="handleLogin">
                登录
            </el-button>

            <h1>
                <el-icon><ElIconHouse /></el-icon> Welcom,{{ i18n.t("home") }}
            </h1>

            <el-select v-model="locale" @change="handleChangeLang">
                <el-option
                    v-for="(item, key) in langOptions"
                    :key="key"
                    :label="item"
                    :value="key"
                />
            </el-select>

            <el-table mb-1 :data="[]" />
            <el-pagination :total="100" />

            <!-- <h4>{{ $dayjs().format("YYYY-MM-DD HH:mm:ss") }}</h4> -->

            <!-- <NuxtRouteAnnouncer />
            <NuxtWelcome /> -->
        </div>
    </el-config-provider>
</template>

<script setup lang="ts">
import cn from "element-plus/es/locale/lang/zh-cn"
import en from "element-plus/dist/locale/en.mjs"

const i18n = useI18n()
const { locale } = useI18n()
const elLocale = ref(cn)
const date = ref("")
const langOptions = ref({
    cn: "简体中文",
    en: "English",
})

const handleLogin = () => {
    console.log("is logined")
}

// 国际化
const language = useCookie<string>("language")
if (language.value) {
    locale.value = language.value
}
const handleChangeLang = (value: string) => {
    console.log(value)

    language.value = value
    elLocale.value = eval(value)
}
</script>

<style scoped></style>
